<template>
  <div class="container">
    <scroll-view class="tab-view"
                 scroll-x
                 scroll-with-animation
                 :scroll-left="scrollLeft">
      <view v-for="(item,index) in tabbar"
            :key="index"
            class="tab-bar-item"
            :class="[currentTab==index ? 'active' : '']"
            :data-current="index"
            @tap.stop="swichNav">
        <text class="tab-bar-title">{{item}}</text>
      </view>
    </scroll-view>
    <swiper class="tab-content"
            :current="currentTab"
            duration="300"
            @change="switchTab"
            :style="{height:winHeight+'px'}">
      <swiper-item v-for="(item,index) in tabbar"
                   :key="index">
        <scroll-view scroll-y
                     class="scoll-y"
                     @scrolltolower="pullrefresh">
          <div class="list-view">
            <!-- 公共操作 -->
            <div class="operation"
                 v-if="!isNoCollect">
              <div class="lf">您收藏了<span class="num">{{collecteNum}}</span><span>{{collecteType}}</span></div>
              <div class="rt"
                   @click="changeBtn">{{operationType}}</div>
            </div>
            <!-- 公共无收藏显示 -->
            <div class="nocollect"
                 v-if="isNoCollect">
              <img class="xiajia"
                   :src="imgOss+'/noshouc.png'"
                   alt />
              <div class="notext">你还没有{{collecteText}}收藏，看看其他的吧</div>
              <div class="gobtn"
                   @click="goBtn">去逛逛</div>
            </div>
            <!-- 商品列表 -->
            <shop v-if="currentTab==0"
                  :isEdit="isShowBtom"
                  :mall_List="shopList"
                  @shopClick="itemClick"></shop>
            <!-- 服务列表 -->
            <server v-if="currentTab==1"
                    :isEdit="isShowBtom"
                    :serverList="serverList"
                    @serverClick="itemClick"></server>
            <!-- 项目列表 -->
            <project v-if="currentTab==2"
                     :mallList="projectList"
                     :isEdit="isShowBtom"
                     @projectClick="itemClick"></project>
            <!-- 医生列表 -->
            <doctor v-if="currentTab==3"
                    :isEdit="isShowBtom"
                    :doctorList="doctorList"
                    @doctorClick="itemClick"></doctor>
            <!-- 医院列表 -->
            <hospital v-if="currentTab==4"
                      :isEdit="isShowBtom"
                      :hospitalList="hospitalList"
                      @hospitalClick="itemClick"></hospital>
            <!-- 商户列表 -->
            <merchant v-if="currentTab==5"
                      :isEdit="isShowBtom"
                      :storeList="storeList"
                      @storeClick="itemClick"></merchant>
          </div>
        </scroll-view>
      </swiper-item>
    </swiper>
    <!-- 公共底部 -->
    <div class="tui-tabbar"
         v-if="isShowBtom">
      <div class="tui-checkAll">
        <img v-if="allCheck"
             :src="imgOss+'/checked.png'"
             alt=""
             @click="checkAll">
        <img v-if="!allCheck"
             :src="imgOss+'/check.png'"
             alt=""
             @click="checkAll">
        <text class="tui-checkbox">全选</text>
      </div>
      <div class="cancel"
           @click="cancel">取消收藏</div>
    </div>
  </div>
</template>

<script>
import shop from "@/components/collecteZj/shop"; //商品列表
import server from "@/components/collecteZj/server"; //服务列表
import project from "@/components/collecteZj/project"; //项目列表
import doctor from "@/components/collecteZj/doctor"; //医生列表
import hospital from "@/components/collecteZj/hospital"; //医院列表
import merchant from "@/components/collecteZj/merchant"; //商户列表
import common from "@/assets/js/mmk_common.js";
export default {
  components: { shop, server, project, doctor, hospital, merchant },
  props: {},
  data () {
    return {
      imgOss: common.image_resource,
      tabbar: ["商品", "服务", "项目", "医生", "医院", "商户"],
      winHeight: "", //窗口高度
      currentTab: 0, //预设当前项的值
      scrollLeft: 0, //tab标题的滚动条位置
      // isIPhoneX: false, //是否是isIPhoneX
      collecteNum: "", //收藏数量
      collecteType: "件商品", //收藏tab类型
      collecteText: "商品", //无收藏类型
      operationType: "编辑", //操作类型
      allCheck: false, //是否全选
      isShowBtom: false, //底部是否显示
      isNoCollect: false, //收藏是否为空
      ids: [], //取消收藏 ID JSON
      type: "", //取消收藏类型
      longitude: "", //经纬度
      latitude: "", //经纬度
      shopList: [], //商品列表
      serverList: [], //服务列表
      projectList: [], //项目列表
      doctorList: [], //医生列表
      hospitalList: [], //医院列表
      storeList: [], //商户列表
      page: 1, //当前页
      pageSize: 10, //每页条数
      last_page: 0 //总页数
    };
  },
  watch: {},
  computed: {},
  onLoad: function () {
    // 设置页面标题
    wx.setNavigationBarTitle({
      title: "收藏"
    });
    let that = this;
    //  高度自适应
    wx.getSystemInfo({
      success: function (res) {
        let calc = res.windowHeight;
        that.winHeight = calc;
      }
    });
    // 初始化数据
    this.currentTab = 0; //预设当前项的值
    this.scrollLeft = 0; //tab标题的滚动条位置
    this.page = 1;
    this.checkCor();
  },
  methods: {
    // 滚动切换标签样式
    switchTab: function (e) {
      let that = this;
      this.currentTab = e.mp.detail.current;
      this.checkCor();
    },
    // 点击标题切换当前页时改变样式
    swichNav: function (e) {
      let cur = e.mp.currentTarget.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        this.currentTab = cur;
      }
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
      if (this.currentTab > 2) {
        //这里距离按实际计算
        this.scrollLeft = 300;
      } else {
        this.scrollLeft = 0;
      }
      // 初始化数据
      this.operationType = "编辑";
      this.isShowBtom = false;
      this.isNoCollect = false;
      this.allCheck = false;
      this.page = 1;
      switch (this.currentTab) {
        case 0:
          this.getShopList();
          this.collecteType = "件商品";
          this.collecteText = "商品";
          break;
        case 1:
          this.getServerList();
          this.collecteType = "个服务";
          this.collecteText = "服务";
          break;
        case 2:
          this.getProjectList();
          this.collecteType = "个项目";
          this.collecteText = "项目";
          break;
        case 3:
          this.getDoctorList();
          this.collecteType = "个医生";
          this.collecteText = "医生";
          break;
        case 4:
          this.getHospitalList();
          this.collecteType = "个医院";
          this.collecteText = "医院";
          break;
        case 5:
          this.getStoreList();
          this.collecteType = "个商户";
          this.collecteText = "商户";
          break;
      }
    },
    // 切换编辑/完成
    changeBtn: function () {
      if (this.operationType == "编辑") {
        this.operationType = "完成";
        this.isShowBtom = true;
      } else {
        this.operationType = "编辑";
        this.isShowBtom = false;
      }
      this.ids = [];
      this.allCheck = false;
      this.returnUnCheck();
    },
    // 列表恢复未选中
    returnUnCheck () {
      let arr = [];
      switch (this.currentTab) {
        case 0:
          arr = arr.concat(this.shopList);
          break;
        case 1:
          arr = arr.concat(this.serverList);
          break;
        case 2:
          arr = arr.concat(this.projectList);
          break;
        case 3:
          arr = arr.concat(this.doctorList);
          break;
        case 4:
          arr = arr.concat(this.hospitalList);
          break;
        case 5:
          arr = arr.concat(this.storeList);
          break;
        default:
          break;
      }
      arr.map(item => {
        item.isChecked = this.allCheck;
        return item;
      });
    },
    // 全选
    checkAll: function () {
      this.allCheck = !this.allCheck;
      switch (this.currentTab) {
        case 0: //商品
          this.shopList.forEach(item => {
            item.isChecked = this.allCheck;
          });
          break;
        case 1: //服务
          this.serverList.forEach(item => {
            item.isChecked = this.allCheck;
          });
          break;
        case 2: //项目
          this.projectList.forEach(item => {
            item.isChecked = this.allCheck;
          });
          break;
        case 3: //医生
          this.doctorList.forEach(item => {
            item.isChecked = this.allCheck;
          });
          break;
        case 4: //医院
          this.hospitalList.forEach(item => {
            item.isChecked = this.allCheck;
          });
          break;
        case 5: //商户
          this.storeList.forEach(item => {
            item.isChecked = this.allCheck;
          });
          break;
      }
    },
    // 单个选择
    itemClick: function (arr) {
      let isAll = true;
      arr.forEach((element, index) => {
        switch (this.currentTab) {
          case 0: //商品
            if (element.isChecked == false) {
              isAll = false;
              return;
            }
            break;
          case 1: //服务
            if (element.isChecked == false) {
              isAll = false;
              return;
            }
            break;
          case 2: //项目
            if (element.isChecked == false) {
              isAll = false;
              return;
            }
            break;
          case 3: //医生
            if (element.isChecked == false) {
              isAll = false;
              return;
            }
            break;
          case 4: //医院
            if (element.isChecked == false) {
              isAll = false;
              return;
            }
            break;
          case 5: //商户
            if (element.isChecked == false) {
              isAll = false;
              return;
            }
            break;
        }
      });
      this.allCheck = isAll;
    },
    // 取消收藏
    cancel: function () {
      this.ids = [];
      switch (this.currentTab) {
        case 0: //商品
          this.type = 2;
          this.shopList.forEach(item => {
            if (item.isChecked) {
              this.ids.push(item.id);
            }
          });
          if (this.ids.length == 0) {
            common.mmk_Loading(2, "请先选择商品");
            return;
          }
          break;
        case 1: //服务
          this.type = 3;
          this.serverList.forEach(item => {
            if (item.isChecked) {
              this.ids.push(item.shop_id);
            }
          });
          if (this.ids.length == 0) {
            common.mmk_Loading(2, "请先选择服务");
            return;
          }
          break;
        case 2: //项目
          this.type = 1;
          this.projectList.forEach(item => {
            if (item.isChecked) {
              this.ids.push(item.id);
            }
          });
          if (this.ids.length == 0) {
            common.mmk_Loading(2, "请先选择项目");
            return;
          }
          break;
        case 3: //医生
          this.type = 5;
          this.doctorList.forEach(item => {
            if (item.isChecked) {
              this.ids.push(item.id.toString());
            }
          });
          if (this.ids.length == 0) {
            common.mmk_Loading(2, "请先选择医生");
            return;
          }
          break;
        case 4: //医院
          this.type = 4;
          this.hospitalList.forEach(item => {
            if (item.isChecked) {
              this.ids.push(item.id.toString());
            }
          });
          if (this.ids.length == 0) {
            common.mmk_Loading(2, "请先选择医院");
            return;
          }
          break;
        case 5: //商户
          this.type = 6;
          this.storeList.forEach(item => {
            if (item.isChecked) {
              this.ids.push(item.shop_id);
            }
          });
          if (this.ids.length == 0) {
            common.mmk_Loading(2, "请先选择商户");
            return;
          }
          break;
      }
      this.cancelFn();
    },
    cancelFn: function () {
      let that = this;
      common.mmk_Loading(0);
      //调用php接口
      if (that.currentTab != 3 && that.currentTab != 4) {
        common.fly_post(
          "api/v4_5/collection/cancel",
          {
            ids: JSON.stringify(that.ids),
            type: that.type
          },
          result => {
            common.mmk_Loading(1);
            let res = result.data;
            if (res.status_code == 0) {
              common.mmk_Loading(2, "取消收藏成功");
              that.allCheck = false;
              that.page = 1;
              setTimeout(() => {
                switch (that.currentTab) {
                  case 0: //商品
                    that.getShopList();
                    break;
                  case 1: //服务
                    that.getServerList();
                    break;
                  case 2: //项目
                    that.getProjectList();
                    break;
                  case 5: //商户
                    that.getStoreList();
                    break;
                }
              }, 500);
            }
          }
        );
      } else {
        //调用java接口
        common.fly_post(
          "api/com.mmk.reservation.api.OpenMmkUserCollectProvider/1.0.0/cancelMmkUserCollects.html",
          {
            collectIds: that.ids,
            type: that.type
          },
          result => {
            common.mmk_Loading(1);
            let res = result.data;
            if (res.code == 0) {
              common.mmk_Loading(2, "删除成功");
              switch (that.currentTab) {
                case 3: //医生
                  that.getDoctorList();
                  break;
                case 4: //医院
                  that.getHospitalList();
                  break;
              }
              that.allCheck = false;
            }
          },
          "isJava"
        );
      }
    },
    // 去逛逛
    goBtn () {
      switch (this.currentTab) {
        case 0: //商品 -> 积分商城首页
          wx.navigateTo({
            url: "/pages/shop_mall/main"
          });
          break;
        case 1: //服务 -> 生美首页
          if (wx.getStorageSync("user_token")) {
            wx.navigateTo({ url: "/pages/life_beauty/main" });
          } else {
            wx.navigateTo({ url: "/pages/package_main/login/main" });
          }
          break;
        case 2: //项目 -> 医美首页
          wx.switchTab({ url: '/pages/beauty_mall/main' });
          break;
        case 3: //医生 -> 医美首页
          wx.switchTab({ url: '/pages/beauty_mall/main' });
          break; //医院 -> 医美首页
        case 4:
          wx.switchTab({ url: '/pages/beauty_mall/main' });
          break;
        case 5: //商户 -> 生美首页
          if (wx.getStorageSync("user_token")) {
            wx.navigateTo({ url: "/pages/life_beauty/main" });
          } else {
            wx.navigateTo({ url: "/pages/package_main/login/main" });
          }
          break;
      }
    },
    // 获取服务列表数据
    getServerList () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/collection/serviceList",
        {
          page: this.page,
          pageSize: this.pageSize
        },
        result => {
          common.mmk_Loading(1);
          let res = result.data;
          if (res.status_code == 0) {
            let arr = res.data.data;
            arr.map(item => {
              item.isChecked = false;
              item.isChecked = this.allCheck;
              return item;
            });
            if (this.page == 1) {
              this.serverList = [];
            }
            this.serverList = this.serverList.concat(arr);
            this.collecteNum = res.data.total;
            this.last_page = res.data.last_page;
            if (arr.length == 0 && this.page > 1) {
              common.mmk_Loading(2, "已经到最底下了");
            }
            if (this.serverList.length == 0) {
              this.isNoCollect = true;
              this.isShowBtom = false;
            }
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 获取项目列表数据
    getProjectList () {
      //1. 获取经纬度
      if (wx.getStorageSync("province_info")) {
        this.longitude = JSON.parse(wx.getStorageSync("province_info")).lgd;
        this.latitude = JSON.parse(wx.getStorageSync("province_info")).ltd;
        this.projectData();
      } else {
        this.get_location(2);
      }
    },
    projectData () {
      common.mmk_Loading(0);
      setTimeout(() => {
        common.fly_post(
          "/api/com.mmk.reservation.api.OpenProjectProvider/1.0.0/userCollect.html",
          {
            pageNum: this.page,
            pageSize: this.pageSize,
            lat: this.latitude.toString(),
            lng: this.longitude.toString()
          },
          msg => {
            common.mmk_Loading(1);
            let res = msg.data;
            if (res.code == 0) {
              let arr = res.data.list;
              arr.map(item => {
                item.isChecked = false;
                item.isChecked = this.allCheck;
                return item;
              });
              if (this.page == 1) {
                this.projectList = [];
              }
              this.projectList = this.projectList.concat(arr);
              this.collecteNum = res.data.count ? res.data.count : 0;
              this.last_page = this.pageCount(this.collecteNum, this.pageSize);;
              if (arr.length == 0 && this.page > 1) {
                common.mmk_Loading(2, "已经到最底下了");
              }
              if (this.projectList.length == 0) {
                this.isNoCollect = true;
                this.isShowBtom = false;
              }
            } else {
              common.mmk_Loading(2, res.msg);
              return false;
            }
          },
          "isJava"
        );
      }, 200);
    },
    // 获取商品列表数据
    getShopList () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/user_collect/goods",
        {
          page: this.page,
          pageSize: this.pageSize
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            let arr = res.data.data;
            arr.map(item => {
              item.isChecked = false;
              item.isChecked = this.allCheck;
              return item;
            });
            if (this.page == 1) {
              this.shopList = [];
            }
            this.shopList = this.shopList.concat(arr);
            this.collecteNum = res.data.total;
            this.last_page = res.data.last_page;
            if (arr.length == 0 && this.page > 1) {
              common.mmk_Loading(2, "已经到最底下了");
            }
            if (this.shopList.length == 0) {
              this.isNoCollect = true;
              this.isShowBtom = false;
            }
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 获取医生列表数据
    getDoctorList () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/com.mmk.reservation.api.OpenDoctorProvider/1.0.0/myCollectList.html",
        {
          pageNum: this.page,
          pageSize: this.pageSize
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.code == 0 && res.data) {
            let arr = res.data.list ? res.data.list : [];
            arr.map(item => {
              item.isChecked = false;
              item.isChecked = this.allCheck;
              return item;
            });
            if (this.page == 1) {
              this.doctorList = [];
            }
            this.doctorList = this.doctorList.concat(arr);
            this.collecteNum = res.data.count ? res.data.count : 0;
            this.last_page = this.pageCount(this.collecteNum, this.pageSize);
            if (arr.length == 0 && this.page > 1) {
              common.mmk_Loading(2, "已经到最底下了");
            }
            if (this.doctorList.length == 0) {
              this.isNoCollect = true;
              this.isShowBtom = false;
            }
          } else {
            common.mmk_Loading(2, res.msg);
          }
        },
        "isJava"
      );
    },
    // 获取医院列表数据
    getHospitalList () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/com.mmk.reservation.api.OpenHospitalProvider/1.0.0/myCollectList.html",
        {
          pageNum: this.page,
          pageSize: this.pageSize
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.code == 0 && res.data) {
            let arr = res.data.list ? res.data.list : [];
            arr.map(item => {
              item.isChecked = false;
              item.isChecked = this.allCheck;
              return item;
            });
            if (this.page == 1) {
              this.hospitalList = [];
            }
            this.hospitalList = this.hospitalList.concat(arr);
            this.collecteNum = res.data.count ? res.data.count : 0;
            this.last_page = this.pageCount(this.collecteNum, this.pageSize);
            if (arr.length == 0 && this.page > 1) {
              common.mmk_Loading(2, "已经到最底下了");
            }
            if (this.hospitalList.length == 0) {
              this.isNoCollect = true;
              this.isShowBtom = false;
            }
          } else {
            common.mmk_Loading(2, res.msg);
          }
        },
        "isJava"
      );
    },
    // 计算页数
    pageCount (totalnum, limit) {
      return totalnum > 0
        ? totalnum < limit
          ? 1
          : totalnum % limit
            ? parseInt(totalnum / limit) + 1
            : totalnum / limit
        : 0;
    },
    // 获取商户列表数据
    getStoreList () {
      //1. 获取经纬度
      if (wx.getStorageSync("province_info")) {
        this.longitude = JSON.parse(wx.getStorageSync("province_info")).lgd;
        this.latitude = JSON.parse(wx.getStorageSync("province_info")).ltd;
        this.storeData();
      } else {
        this.get_location(5);
      }
    },
    storeData () {
      common.mmk_Loading(0);
      setTimeout(() => {
        common.fly_post(
          "/api/v4_5/collection/shopList",
          {
            page: this.page,
            pageSize: this.pageSize,
            lat: this.latitude,
            lng: this.longitude
          },
          msg => {
            common.mmk_Loading(1);
            let res = msg.data;
            if (res.status_code == 0) {
              let arr = res.data.data;
              arr.map(item => {
                item.isChecked = false;
                item.isChecked = this.allCheck;
                return item;
              });
              if (this.page == 1) {
                this.storeList = [];
              }
              this.storeList = this.storeList.concat(arr);
              this.collecteNum = res.data.total;
              this.last_page = res.data.last_page;
              if (arr.length == 0 && this.page > 1) {
                common.mmk_Loading(2, "已经到最底下了");
              }
              if (this.storeList.length == 0) {
                this.isNoCollect = true;
                this.isShowBtom = false;
              }
            }
          }
        );
      }, 200);
    },
    //上拉加载
    pullrefresh (e) {
      if (this.page <= this.last_page) {
        this.page++;
        switch (this.currentTab) {
          case 0: //商品
            this.getShopList();
            break;
          case 1: //服务
            this.getServerList();
            break;
          case 2: //项目
            this.getProjectList();
            break;
          case 3: //医生
            this.getDoctorList();
            break;
          case 4: //医院
            this.getHospitalList();
            break;
          case 5: //商户
            this.getStoreList();
            break;
          default:
            break;
        }
      }
    },
    // 获取经纬度
    get_location (tag) {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success () {
          wx.getLocation({
            type: "gcj02",
            success (res) {
              that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              if (tag == 2) {
                that.projectData();
              } else if (tag == 5) {
                that.storeData();
              }
            },
            fail () {
              wx.showToast({
                title: "无法获取地理位置",
                icon: "none",
                duration: 2000,
                mask: true
              });
              if (tag == 2) {
                that.projectData();
              } else if (tag == 5) {
                that.storeData();
              }
            }
          });
        },
        fail () {
          if (tag == 2) {
            that.projectData();
          } else if (tag == 5) {
            that.storeData();
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
}
/*tabbar start*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.tab-view::before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.tab-view {
  width: 100%;
  height: 44px;
  overflow: hidden;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
  white-space: nowrap;
}

.tab-bar-item {
  padding: 0;
  height: 44px;
  width: 16.7%;
  line-height: 44px;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.tab-bar-title {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  color: #666666;
  font-weight: 400;
}

.active::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 4px;
  background: #f64665;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.active .tab-bar-title {
  color: #f64665 !important;
}
/*tabbar end*/
.scoll-y {
  height: 100%;
}
/*tabbar content*/
.list-view {
  padding-top: 60px;
  margin-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}
// 公共操作
.operation {
  width: 92%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  box-sizing: border-box;
}
.num {
  color: #ff383e;
}
.rt {
  color: #3f454b;
}
// 底部
.tui-tabbar {
  width: 100%;
  height: 50px;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
  z-index: 99999;
}
.isIphonex {
  height: 84px;
  padding-bottom: 34px;
}

.tui-checkAll {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
  }
}
.tui-checkbox {
  padding-left: 6px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3f454b;
  line-height: 20px;
}
.cancel {
  width: 88px;
  height: 32px;
  background: #ff383e;
  border-radius: 20px;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 32px;
}
// 无收藏内容
.nocollect {
  text-align: center;
  width: 70%;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.xiajia {
  width: 132px;
  height: 122px;
}
.notext {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  margin-top: 17px;
}
.gobtn {
  margin: 0 auto;
  margin-top: 24px;
  width: 105px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  background: red;
  border-radius: 20px;
}
</style>